.jc:where(.astro-2mp5k3f3){--jc-accent: hsl(217, 91%, 60%);--jc-good: #10b981;--jc-bad: #f59e0b;--jc-track-bg: color-mix(in srgb, var(--sl-color-text) 6%, transparent);--jc-track-border: color-mix(in srgb, var(--sl-color-text) 14%, transparent);--jc-pp-track-bg: color-mix(in srgb, var(--sl-color-text) 20%, transparent);--jc-pp-track-border: color-mix(in srgb, var(--sl-color-text) 28%, transparent);--jc-duration: .8s;position:relative;margin:1.5rem 0;background:var(--sl-color-bg-sidebar);border:1px solid var(--sl-color-gray-5);border-radius:12px;padding:16px 18px 18px}.jc-grid:where(.astro-2mp5k3f3){display:grid;grid-template-columns:minmax(200px,240px) 1fr;gap:18px;align-items:start}@media(max-width:640px){.jc-grid:where(.astro-2mp5k3f3){grid-template-columns:1fr}}.jc-controls:where(.astro-2mp5k3f3){display:flex;flex-direction:column;gap:14px;min-width:0}.jc-param:where(.astro-2mp5k3f3){display:flex;flex-direction:column;gap:6px}.jc-param-head:where(.astro-2mp5k3f3){display:flex;justify-content:space-between;align-items:baseline;gap:10px}.jc-param-label:where(.astro-2mp5k3f3){font:600 12px ui-sans-serif,system-ui,sans-serif;color:var(--sl-color-text);line-height:1.2}.jc-param-value:where(.astro-2mp5k3f3){font:600 11.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--sl-color-gray-3);letter-spacing:.02em}.jc-slider:where(.astro-2mp5k3f3){appearance:none;-webkit-appearance:none;width:100%;height:16px;background:transparent;outline:none;margin:0;cursor:pointer;display:block}.jc-slider:where(.astro-2mp5k3f3)::-webkit-slider-runnable-track{height:4px;background:var(--jc-pp-track-bg);border-radius:2px}.jc-slider:where(.astro-2mp5k3f3)::-moz-range-track{height:4px;background:var(--jc-pp-track-bg);border-radius:2px}.jc-slider:where(.astro-2mp5k3f3)::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;background:var(--jc-accent);border:2px solid var(--sl-color-bg-sidebar);border-radius:50%;margin-top:-6px;box-shadow:0 1px 2px #0003}.jc-slider:where(.astro-2mp5k3f3)::-moz-range-thumb{width:16px;height:16px;background:var(--jc-accent);border:2px solid var(--sl-color-bg-sidebar);border-radius:50%;box-shadow:0 1px 2px #0003}.jc-slider:where(.astro-2mp5k3f3):focus-visible::-webkit-slider-thumb{outline:2px solid var(--jc-accent);outline-offset:2px}.jc-param-toggle:where(.astro-2mp5k3f3) .jc-param-head:where(.astro-2mp5k3f3){margin-bottom:2px}.jc-toggle:where(.astro-2mp5k3f3){display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}.jc-toggle:where(.astro-2mp5k3f3) input:where(.astro-2mp5k3f3){appearance:none;-webkit-appearance:none;position:relative;width:34px;height:20px;margin:0;background:var(--jc-pp-track-bg);border:1px solid var(--jc-pp-track-border);border-radius:999px;cursor:pointer;transition:background-color .14s,border-color .14s;flex:0 0 auto}.jc-toggle:where(.astro-2mp5k3f3) input:where(.astro-2mp5k3f3):before{content:"";position:absolute;top:1px;left:1px;width:16px;height:16px;background:color-mix(in srgb,var(--sl-color-text) 55%,var(--sl-color-bg));border-radius:50%;box-shadow:0 1px 2px #0000002e;transition:transform .14s,background-color .14s}.jc-toggle:where(.astro-2mp5k3f3) input:where(.astro-2mp5k3f3):checked{background:var(--jc-accent);border-color:var(--jc-accent)}.jc-toggle:where(.astro-2mp5k3f3) input:where(.astro-2mp5k3f3):checked:before{background:#fff;transform:translate(14px)}.jc-toggle:where(.astro-2mp5k3f3) input:where(.astro-2mp5k3f3):focus-visible{outline:2px solid var(--jc-accent);outline-offset:2px}.jc-toggle-text:where(.astro-2mp5k3f3){font:600 11.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--sl-color-gray-3);letter-spacing:.02em}.jc-preview:where(.astro-2mp5k3f3){display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--sl-color-bg);border:1px solid var(--sl-color-hairline);border-radius:8px;min-width:0;overflow:hidden}.jc-row:where(.astro-2mp5k3f3){display:flex;flex-direction:column;gap:6px;min-width:0}.jc-row-head:where(.astro-2mp5k3f3){display:flex;align-items:center;gap:10px;min-width:0}.jc-row-tag:where(.astro-2mp5k3f3){font:600 11px ui-monospace,SFMono-Regular,Menlo,monospace;padding:2px 8px;border-radius:999px;letter-spacing:.02em;flex:0 0 auto}.jc-row-tag-good:where(.astro-2mp5k3f3){color:#fff;background:var(--jc-good)}.jc-row-tag-bad:where(.astro-2mp5k3f3){color:#fff;background:var(--jc-bad)}.jc-row-note:where(.astro-2mp5k3f3){font:600 10.5px ui-sans-serif,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--sl-color-gray-3)}.jc-track:where(.astro-2mp5k3f3){position:relative;height:44px;background:var(--jc-track-bg);border:1px solid var(--jc-track-border);border-radius:6px;overflow:hidden}.jc-box:where(.astro-2mp5k3f3){position:absolute;top:50%;width:30px;height:30px;border-radius:5px;box-shadow:0 1px 3px #00000040}.jc-box-transform:where(.astro-2mp5k3f3){left:0;background:var(--jc-good);animation:jc-translate var(--jc-duration) ease-in-out infinite alternate;will-change:transform;transform:translateY(-50%)}@keyframes jc-translate{0%{transform:translateY(-50%)}to{transform:translate(calc(var(--jc-track-width, 360px) - 30px),-50%)}}.jc-box-left:where(.astro-2mp5k3f3){left:0;background:var(--jc-bad);transform:translateY(-50%);animation:jc-left var(--jc-duration) ease-in-out infinite alternate}@keyframes jc-left{0%{left:0}to{left:calc(var(--jc-track-width, 360px) - 30px)}}.jc-readouts:where(.astro-2mp5k3f3){display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.jc-readout:where(.astro-2mp5k3f3){display:inline-flex;gap:8px;align-items:baseline;background:var(--sl-color-bg-sidebar);border:1px solid var(--sl-color-hairline);border-radius:999px;padding:4px 12px}.jc-readout-label:where(.astro-2mp5k3f3){font:600 11px ui-sans-serif,system-ui,sans-serif;color:var(--sl-color-gray-3);text-transform:uppercase;letter-spacing:.05em}.jc-readout-value:where(.astro-2mp5k3f3){font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--sl-color-text)}